<template>
  <div>
    <el-main :style="{ '--zoom': zoom }"> 
      <el-row>
        <el-col>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="专利奖" name="patent">
              <honortabs @getSearch="getSearch" @changeYears="changeYears" @changePrize="changePrize" @changeAddress="changeAddress"
                @currentChange="currentChange" :tableData="tableData" :yearlist="yearlist" :page="honorListForm.page"
                :count="count" :prizelist="prizelist" :addresslist="addresslist">
              </honortabs>
            </el-tab-pane>
            <el-tab-pane label="国家示范企业" name="Gdemonstration">
              <honortabs @getSearch="getSearch" @changeYears="changeYears" @changeAddress="changeAddress" @currentChange="currentChange" :tableData="tableData" :yearlist="yearlist" :addresslist="addresslist"
                :page="honorListForm.page" :count="count">
              </honortabs>
            </el-tab-pane>
            <el-tab-pane label="省级示范企业" name="Sdemonstration">
              <honortabs @getSearch="getSearch" @changeYears="changeYears" @changeAddress="changeAddress" @currentChange="currentChange" :tableData="tableData" :yearlist="yearlist" :addresslist="addresslist"
                :page="honorListForm.page" :count="count">
              </honortabs>
            </el-tab-pane>
            <el-tab-pane label="国家优势企业" name="Gadvantage">
              <honortabs @getSearch="getSearch" @changeYears="changeYears" @changeAddress="changeAddress" @currentChange="currentChange" :tableData="tableData" :yearlist="yearlist" :addresslist="addresslist"
                :page="honorListForm.page" :count="count">
              </honortabs>
            </el-tab-pane>
            <!-- <el-tab-pane label="贯标认证企业" name="mark">
              <honortabs @changeYears="changeYears" @changeAddress="changeAddress" @currentChange="currentChange" :tableData="tableData" :yearlist="yearlist" :addresslist="addresslist"
                :page="honorListForm.page" :count="count">
              </honortabs>
            </el-tab-pane> -->
          </el-tabs>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>
import { getPrizeYears, honorList, getExamplesList } from '@/api/web'
import honortabs from './components/honortabs.vue';

export default {
  components: { honortabs },
  data() {
    return {
      zoom: 1,
      activeName: "patent",
      activeNumber: 0,
      tableData: [
      ],
      yearlist: [
      ],
      prizelist: [
      ],
      addresslist: [
      ],
      year: '',
      prize: '',
      honorListForm: {
        years: '',
        address: '',
        prize_name: '',
        name: '',
        page: 1,
      },
      getPrizeYearsForm: {
        address: "",
        prize_name: "",
        table: "patent",
        type: null,
        years: ""
      },
      count: 0,
    };
  },
  mounted() {
    this.honorList()
    this.getPrizeYears()
    let width = document.documentElement.clientWidth || document.body.clientWidth;
    this.zoom = width / 1920;
  },
  methods: {
    getSearch(search){
      this.honorListForm.name = search
      this.honorList()
    },
    changeAddress(address) {
      this.honorListForm.address = address;
      if (this.activeNumber == 0) {
        this.honorList()
      } else if (this.activeNumber == 4) {

      } else {
        this.getExamplesList()
      }
    },
    changePrize(prize) {
      this.honorListForm.prize_name = prize
      if (this.activeNumber == 0) {
        this.honorList()
      } else if (this.activeNumber == 4) {

      } else {
        this.getExamplesList()
      }
    },
    changeYears(year) {
      this.honorListForm.years = year
      if (this.activeNumber == 0) {
        this.honorList()
      } else if (this.activeNumber == 4) {

      } else {
        this.getExamplesList()
      }
    },
    currentChange(page) {
      this.honorListForm.page = page;
      if (this.activeNumber == 0) {
        this.honorList()
      } else if (this.activeNumber == 4) {

      } else {
        this.getExamplesList()
      }
    },
    honorList() {
      honorList(this.honorListForm).then(res => {
        this.tableData = res.list;
        this.count = res.count;
      })
    },
    getExamplesList() {
      getExamplesList(this.honorListForm).then(res => {
        this.tableData = res.list;
        this.count = res.count;
      })
    },

    getPrizeYears() {
      getPrizeYears(this.getPrizeYearsForm).then(res => {
        this.yearlist = res.years;
        if (res.prize_name) {
          this.prizelist = res.prize_name;
        }
        this.addresslist = res.address;
      })
    },
    handleClick(tab, event) {
      // console.log(tab.index);
      this.activeNumber = tab.index
      if (tab.index == 0) {
        this.ResetForm()
        this.honorList()
        this.getPrizeYears()
      } else if (tab.index == 1) {
        this.ResetForm()
        this.honorListForm.type = 1
        this.getPrizeYearsForm.type = 1
        this.getPrizeYearsForm.table = "examples"
        this.getExamplesList()
        this.getPrizeYears()
      } else if (tab.index == 2) {
        this.ResetForm()
        this.honorListForm.type = 2
        this.getPrizeYearsForm.type = 2
        this.getPrizeYearsForm.table = "examples"
        this.getExamplesList()
        this.getPrizeYears()
      } else if (tab.index == 3) {
        this.ResetForm()
        this.honorListForm.type = 3
        this.getPrizeYearsForm.type = 3
        this.getPrizeYearsForm.table = "examples"
        this.getExamplesList()
        this.getPrizeYears()
      } else if (tab.index == 4) {
        this.ResetForm()
        this.tableData = [];
        this.count = 0;
      }


    },
    ResetForm() {
      this.getPrizeYearsForm = {
        address: "",
        prize_name: "",
        table: "patent",
        type: null,
        years: ""
      }
      this.honorListForm = {
        years: '',
        address: '',
        prize_name: '',
        page: 1,
      }
    }
  },
};
</script>

<style scoped lang="less">
.el-main {
  zoom: var(--zoom)
}
::v-deep .el-input__inner {}

::v-deep .el-input__icon {
  line-height: 38px;
  font-size: 16px;

}

.mr {
  margin-bottom: 20px;
}

.mr:hover {
  background: #f4f5f7;
  cursor: pointer;
}

.el-main {
  margin: 25px 30px 0 30px;
  border-radius: 5px;
}

::v-deep .el-tabs__item {
  padding: 0 52px;
  font-size: 16px;
}

::v-deep input {
  border-radius: 30px;
  height: 38px;
  font-size: 16px;
}

::v-deep .el-table_1_column_5 {
  text-align: center;
}

.b_table {
  margin-top: 15px;
}

.button_ys {
  background-color: #387DFF;
  height: 30px;
  line-height: 5px;
  padding: 10px 40px;
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}
</style>
